<template>
  <div>
    <el-row justify="space-between" align="middle" class="tree-title" v-if="isShowTitle">
      <el-link type="primary" :underline="false">
        <span v-if="isExpand">{{ titleName }}</span>
      </el-link>
      <el-link type="primary" :underline="false">
        <el-icon v-if="isExpand" @click="changeExpand">
          <Expand />
        </el-icon>
        <el-icon v-else @click="changeExpand">
          <Fold />
        </el-icon>
      </el-link>
    </el-row>
    <Transition name="slide-fade">
      <div v-if="isExpand">
        <el-tree ref="tree" :data="treeData" :props="defaultProps" @node-click="handleNodeClick"
          :default-expand-all="defaultExpandAll" :node-key="nodeKey" :current-node-key="currentNodeKey"
          :expand-on-click-node="expandOnClickNode">
          <template #default="{ node }">
            <el-tooltip effect="light" :disabled="isShowToolTip">
              <template #content>{{ node.label }}</template>
              <span class="el-tree-node__label" @mouseover="isToolTip">{{ node.label }}</span>
            </el-tooltip>
          </template>
        </el-tree>
      </div>
    </Transition>
  </div>
</template>
<script setup>
const props = defineProps({
  treeData: {
    type: Array,
    required: true
  },
  defaultProps: {
    type: Object,
    default: {
      children: 'children',
      label: 'label',
    }
  },
  defaultExpandAll: {
    type: Boolean,
    default: true
  },
  nodeKey: String,
  currentNodeKey: String,
  expandOnClickNode: {
    type: Boolean,
    default: false
  },
  isShowTitle: {
    type: Boolean,
    default: false
  },
  titleName: {
    type: String,
    default: '项目管理'
  },
  isExpand: {
    type: Boolean,
    default: true
  }
})
const emit = defineEmits(['handleNodeClick', 'update:isExpand'])
const { proxy } = getCurrentInstance()
const tree = ref()

const handleNodeClick = (data, node) => {
  emit('handleNodeClick', data, node)
  props.treeData && props.currentNodeKey && tree.value && tree.value.setCurrentKey(props.currentNodeKey)
}
watch([() => props.currentNodeKey, () => props.treeData], () => {
  nextTick(() => {
    props.treeData && props.currentNodeKey && tree.value && tree.value.setCurrentKey(props.currentNodeKey)
  })
}, { deep: true, immediate: true })

const isShowToolTip = ref(false)
const isToolTip = (e) => {
  const selfWidth = e.target.offsetWidth
  const parentWidth = e.target.parentNode.offsetWidth - 24 - 18
  if (selfWidth > parentWidth) {
    isShowToolTip.value = false
  } else {
    isShowToolTip.value = true
  }
}
const changeExpand = () => {
  emit('update:isExpand', !props.isExpand)
}
</script>
<style scoped lang="scss">
.tree-title {
  .el-link {
    font-size: 20px;
    font-weight: 600;
    padding: 5px 0;
  }
}

.el-tree {
  width: 100%;

  &>:deep(.el-tree-node.is-expanded) {
    &>.el-tree-node__content {
      font-weight: bold;
    }

    .el-tree-node__children {
      position: relative;

      .el-tree-node__content {
        position: relative;
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: inline-block;
      }

      .el-tree-node__content:before {
        position: absolute;
        content: '';
        display: inline-block;
        top: 50%;
        border-bottom: 1px dashed #bfb3b3;
        width: 20px;
        height: 0;
        left: 12px;
      }
    }

    .el-tree-node__children:before {
      position: absolute;
      content: '';
      display: inline-block;
      top: 0;
      border-left: 1px dashed #bfb3b3;
      width: 0;
      height: calc(100% - 16px);
      left: 12px;
      z-index: 10;
    }

  }

  :deep(.el-tree-node.is-expanded.is-current) {
    &>.el-tree-node__content {
      color: var(--el-color-primary);

      .el-tree-node__expand-icon {
        color: var(--el-color-primary);
      }

      .is-leaf {
        color: rgba(0, 0, 0, 0);
      }
    }
  }

  :deep(.el-tree-node:focus>.el-tree-node__content) {
    background-color: transparent;
  }

  // &>:deep(.el-tree-node.is-expanded:has(.el-tree-node__children>.el-tree-node.is-current)>.el-tree-node__content) {
  &>:deep(.el-tree-node.is-expanded:has(.el-tree-node__children>.el-tree-node.is-current)) {

    &>.el-tree-node__content {
      color: var(--el-color-primary);

      &>.el-tree-node__expand-icon {
        color: var(--el-color-primary);
      }
    }
  }
}
</style>